import { Component } from "react";
import './App.css'
// NavLink 用来跳转路由 Routes 用来展示对应组件 Route 用来定义路由匹配规则
// Link组件和NavLink 组件一样都是用来跳转路由的 使用link组件标签上没有选中状态
// Navigate 路由重定向组件 组件只要加载一次 路由就会重新匹配一次
import {NavLink,Link} from 'react-router-dom'
import RoutesDOM from "./router";
export default class App extends Component{

    render(){
        return (
            <div>
                {
                    //to 属性表示跳转的路由地址
                }
                <div>
                <NavLink to='/home'>首页</NavLink> |
                <NavLink to='/cart'>购物车</NavLink> |
                <NavLink to='/mine'>我的</NavLink> |
                <Link to='/news'>新闻中心</Link> |
                <NavLink to='/login'>登录</NavLink>
                </div>
                {/* <Routes>
                        path 表示访问路径
                        element 表示匹配到访问路径时要展示的组件页面
                    <Route path="/home" element={<Home/>}></Route>
                    <Route path="/cart" element={<Cart/>}></Route>
                    <Route path='/mine' element={<Mine/>}></Route>
                    <Route path='/news' element={<News/>}></Route>
                    <Route path='/' element={<Navigate to="/home" />}></Route>
                </Routes> */}
                <RoutesDOM/>
            </div>
        )
    }
}